<template>
  <div>
    <h1>3号训练室</h1>

    <hr>

    <el-card>
      <!-- el-row使用后，表示启用element-ui的栅格布局，一行分成24份，超过24份，自动换行 -->
      <el-row>
        <el-col :span="12">111</el-col>
        <el-col :span="12">222</el-col>
        <el-col :span="12">333</el-col>
        <el-col :span="12">444</el-col>
        <el-col :span="12">555</el-col>
        <el-col :span="12">666</el-col>
      </el-row>
    </el-card>

    <hr>

    <el-card>
      <el-row>
        <el-col :span="20">111</el-col>
        <el-col :span="4">222</el-col>
        <el-col :span="20">333</el-col>
        <el-col :span="4">444</el-col>
        <el-col :span="12">555</el-col>
        <el-col :span="12">666</el-col>
      </el-row>
    </el-card>

    <hr>

    <el-card>
      <el-row>
        <el-col :span="4">111</el-col>
        <el-col :span="4" :offset="16">222</el-col>
      </el-row>
    </el-card>

    <hr>

    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col :span="4">111</el-col>
        <el-col :span="4">222</el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.el-col {
  border: 1px solid #000;
  height: 30px;
}
</style>
